<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav-top {
            border-radius: 0;
            width: 100%;
            height: 70px;
        }

        .box {
            width: 100%;
            height: 70px;
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .search {
            width: 300px;
            height: 50px;
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .search-input-radius {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right-width: 0;
        }

        .search-button-radius {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left-width: 0;
        }

        .head-img {
            width: 50px;
            height: 50px;
            border: 2px white solid;
        }

        .head-img2 {
            width: 70px;
            height: 70px;
            border: 2px white solid;
            margin: 10px 10px 2px 5px;
        }

        .head-img:hover {
            border: 2px #426978 solid;
        }

        .mydropdown {
            position: relative;
        }

        .mydropdown-toggle:hover {
            outline: 0;
        }

        .mydropdown-menu {
            position: absolute;
            background-color: #EEEEEE;
            top: 100%;
            width: 250px;
            left: -200px;
            z-index: 1000;
            display: none;
            border-radius: 0;
            padding: 0;
            margin: 0;
            text-align: right;
            color: white;
        }

        .mydropdown-menu a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<nav id="navbar" class="navbar navbar-inverse nav-top" role="navigation">
    <div class="container-fluid">
        <div class="box">
            <!--链接-->
            <div>
                <div style="width: 100px" class="navbar-header">
                    <a class="navbar-brand" href="/">HebeuCS</a>
                </div>
                <div style="width: 300px">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">后台管理</a></li>
                    </ul>
                </div>
            </div>
            <!--站位-->
            <div style="width: 100px">
            </div>
            <!--搜索-->
            <div class="search">
                <input id="search-input" class="form-control search-input-radius" type="text" name="search"
                       placeholder="搜索你感兴趣的内容...">
                <button id="search-btn" class="btn btn-default search-button-radius">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
            <!--头像区-->
            <div style="height: 70px;line-height: 70px">
                <div>
                    <ul id="downmenu" style="list-style: none">
                        <li class="mydropdown">
                            <a href="#" class="mydropdown-toggle" data-toggle="mydropdown">
                                <img id="head-img" class="img-circle head-img" src="content_background.png" alt="头像">
                            </a>
                            <script>
                                $(function ()
                                {
                                    var menu = $('#menu');
                                    $('#downmenu').hover(
                                            function ()
                                            {
                                                menu.fadeIn(500)
                                            }
                                            , function ()
                                            {
                                                menu.fadeOut(500)
                                            })
                                });
                            </script>
                            <ul id="menu" class="mydropdown-menu" style="list-style: none">
                                <li style="text-align: left">
                                    <div id="list"
                                         style="width: 250px;height: 100px;line-height: 100px;
                                         background: url('menu_background.jpg')">
                                        <img class="img-circle head-img2" src="content_background.png"
                                             alt="头像">
                                        <span style="margin-left: 30px"><b>用户:白雨浓</b></span>
                                    </div>
                                </li>
                                <li>
                                    <a href="#">个人中心</a>
                                </li>
                                <li>
                                    <a href="#">退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
</body>
</html>